<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head></h:head>
<body>
	<h:form id="form">

			<p:growl id="msgs" showDetail="true" life="1000" />
			<p:panel header="Bebida" style="border: none;">

				<p:dataTable id="singleDT" var="td" value="#{bebidaBean.listaBebidas}"
					selection="#{bebidaBean.selectedBebida}" rowKey="#{td.nombreBebida}"
					editable="true" style="width:50%" rows="5" paginator="true"
					paginatorPosition="bottom"
					paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">

					<p:ajax event="rowEdit" listener="#{bebidaBean.onRowEdit}"
						update=":#{p:component('msgs')}" />
					<p:ajax event="rowEditCancel" listener="#{bebidaBean.onRowCancel}"
						update=":#{p:component('msgs')}" />

					<f:facet name="header">
						<p:outputPanel style="text-align:right">
							<h:outputText value="Buscar: " />
							<p:inputText id="globalFilter" onkeyup="PF('bebidaTable').filter()"
								style="width:150px" placeholder="Ingrese Bebida" />
						</p:outputPanel>
					</f:facet>

					<p:column headerText="Bebida" style="text-align:left">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{td.nombreBebida}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText id="modelInput" value="#{td.nombreBebida}"
									style="width:100%" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column headerText="Descripción" style="text-align:left">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{td.descripcionBebida}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{td.descripcionBebida}"
								style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>
				<p:column headerText="Contenido" style="text-align:left">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{td.contenidoBebida}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{td.contenidoBebida}"
								style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>
				
				<p:column headerText="Unidad Medida">
					

				</p:column>
				
				
					<p:column headerText="Modificar"
						style="width:70px;text-align: center">
						<p:rowEditor />
					</p:column>

					<p:column headerText="Eliminar"
						style="width:32px;text-align: center">
						<p:commandButton process="singleDT"
							update=":#{p:component('singleDT')}" icon="ui-icon-close"
							title="View" action="#{bebidaBean.eliminarBebida}">
							<f:setPropertyActionListener value="#{td}"
								target="#{bebidaBean.selectedBebida}" />

							<p:confirm header="Confirmación" message="Está seguro?"
								icon="ui-icon-alert" />
						</p:commandButton>
					</p:column>

				</p:dataTable>

				<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
					<p:commandButton value="Si" type="button"
						styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
					<p:commandButton value="No" type="button"
						styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
				</p:confirmDialog>

				<br />
<h:panelGrid columns="1" cellpadding="5">

				<p:commandButton value="Nuevo" type="button"
					onclick="PF('dlg').show();" />
			</h:panelGrid>

			<p:dialog header="Nueva Bebida" widgetVar="dlg" modal="true" height="300">
				<p:panel id="basic" style="width:600px">

					
					<h:panelGrid columns="3" cellpadding="5">
						<h:outputLabel for="nomBebida" value="Nombre:" />
						<p:inputText id="nomBebida" required="true" label="Nombre Bebida"
							value="#{bebidaBean.bebida.nombreBebida}" />
						<p:message for="nomBebida" display="icon" />
						<h:outputLabel for="nomBebida" value="Descripción:" />
						<p:inputText id="descBebida" required="true" label="Descripción Bebida"
							value="#{bebidaBean.bebida.descripcionBebida}" />
						<p:message for="descBebida" display="icon" />
						<h:outputLabel for="contBebida" value="Contenido:" />
						<p:inputText id="contBebida" required="true" label="Contenido Bebida"
							value="#{bebidaBean.bebida.contenidoBebida}" />
						<p:message for="contBebida" display="icon" />
					</h:panelGrid>
					<p:separator id="separator" />
					
					<p:commandButton value="Guardar" id="ajax" process="@form"
						icon="ui-icon-disk" update=":#{p:component('form')}"
						actionListener="#{bebidaBean.guardarBebida}" />
								
		

					
				</p:panel>
			</p:dialog>
				
			</p:panel>

		</h:form>

</body>
</html>